<!--
 * @Autor: ZN
 * @LastEditors: ZN
 * @Date: 2023-04-27 15:30:55
 * @LastEditTime: 2023-05-10 18:03:14
 * @Description: 
-->
<template>
  <el-container>
    <el-aside class="side" width="200">
      <Menu />
    </el-aside>
    <el-container>
      <el-header class="el-header">
        <Header />
      </el-header>
      <el-main class="el-main">
        <router-view></router-view>
      </el-main>
      <el-footer class="el-footer">
        <Footer />
      </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import Header from "./Header.vue"
import Footer from "./Footer.vue"
import Menu from "./Menu.vue"

import { useStore } from "vuex"

const store = useStore()
</script>

<style lang="scss" scoped>
.el-container {
  height: 100vh;
}
.side {
  background-color: #303133;
  color: #333;
  width: 210px;
  min-height: 100vh;
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  // overflow: hidden;
}
.el-footer {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-top: 1px solid #dddd;
}
.el-header {
  // border-bottom: 1px solid #ccc;
  box-shadow: 0 8px 32px #999;
}
</style>
